<!DOCTYPE html>
<html lang="zh-cn">
<head>
    {% block head %}
        <title>{% block title %}{% endblock %}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=11"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="shortcut icon" href="/static/img/favicon.ico">
        <style>
            div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {
                padding: 0;
                margin: 0;
            }

            body {
                background: #ccdeed;
                background-repeat: no-repeat;
                background-origin: content-box;
                min-height: 100%;
            }

            .header {
                background: url(/static/img/headImg2.png);
                height: 180px;
                position: relative;
                z-index: 199;
                background-position: center;
                background-repeat: no-repeat;
            }


            .content {
                margin: 5px auto;
                zoom: 1;
                padding: 20px;
                min-height: 700px;
                background: rgba(255, 255, 255, 0.9);
            }

            .content:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

            .rightBox {
                float: left;
                width: 20%;
            {#margin: 5px;#} display: inline;
                -webkit-transition: width 1s ease;
                -moz-transition: width 1s ease;
                -o-transition: width 1s ease;
                -ms-transition: width 2s ease;
                transition: width 1s ease;
            }

            .tableBox {
                margin: auto;
                width: 80%;
                table-layout: fixed;
                word-break: break-all;

            }

            .th {
                width: 150px;
            }


            .middleBox {
                float: left;
                width: 80%;
            {#margin: 5px;#} display: inline;
                -webkit-transition: width 1s ease;
                -moz-transition: width 1s ease;
                -o-transition: width 1s ease;
                -ms-transition: width 1s ease;
                transition: width 1s ease;
            }

            .rightBox {

            }

            .videoListBox {
                overflow-x: auto;
                overflow-y: auto;
                line-height: 30px;
                text-align: center;
            }


            .videoListBox::-webkit-scrollbar-track-piece {
                background-color: #fff; /*滚动条的背景颜色*/
                -webkit-border-radius: 0; /*滚动条的圆角宽度*/
            }

            .videoListBox::-webkit-scrollbar {
                width: 10px; /*滚动条的宽度*/
                height: 8px; /*滚动条的高度*/
            }

            .videoListBox::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
                height: 50px;
                background-color: #999;
                -webkit-border-radius: 4px;
                outline: 2px solid #fff;
                outline-offset: -2px;
                border: 2px solid #fff;
            }

            .videoListBox::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
                height: 50px;
                background-color: #9f9f9f;
                -webkit-border-radius: 4px;
            }


            .endBox {
                margin: auto;
                padding: 10px;
                background: #ccdeed;
            }

            .photo {
                padding: 10px;
            }

            /* 下拉按钮样式 */
            .dropbtn {
                background-color: rgba(229, 241, 255, 0);
                color: #000000;
                padding: 12px 16px;
                font-size: 16px;
                border: none;
                cursor: pointer;
            }

            /* 容器 <div> - 需要定位下拉内容 */
            .dropdown {
                position: relative;
                display: inline-block;
            }

            /* 下拉内容 (默认隐藏) */
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 120px;
            }

            /* 下拉菜单的链接 */
            .dropdown-content a {
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                font-size: 14px;

            }

            /* 鼠标移上去后修改下拉菜单链接颜色 */
            .dropdown-content a:hover {
                background-color: #f1f1f1
            }

            /* 在鼠标移上去后显示下拉菜单 */
            .dropdown:hover .dropdown-content {
                display: block;
            }

            /* 当下拉内容显示后修改下拉按钮的背景颜色 */
            .dropdown:hover .dropbtn {
                background-color: #def1ff;
            }

            @media only screen and (min-width: 1200px) {
            {#宽度大于1200px时，pc端#}
                .content {
                    width: 1200px;

                }

                .videoListBox {
                    height: 535px;
                }

                .endBox {
                    width: 1200px;
                }

            }

            @media only screen and (min-width: 600px) and (max-width: 1200px) {
            {#宽度在600px到1200px时 平板端#}
                .middleBox {
                    width: 80%;
                }

                .rightBox {
                    width: 20%;
                }

                .videoListBox {
                    height: 535px;
                }


            }

            @media only screen and (max-width: 600px) {
                .rightBox {
                    width: 99%;
                    padding: 25px 0px 0px 0px;
                }

                .middleBox {
                    width: 99%;
                }

                .th {
                    width: 85px;
                }

                .tableBox {
                    width: 90%;
                }

                .error_img {
                    width: 100%;
                }
            }
        </style>
        <div class="page-header">
            <link rel="stylesheet" href="{{ url_for('static', filename='docs.css') }}">
        </div>
    {% endblock %}

</head>
<body>
{% block body %}
    {% block page_content %}
    {% endblock %}
{% endblock %}
</body>
</html>
